<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="assets/images/favicon.png" type="image/png">
    <title>用户中心</title>

    <!--Begin  Page Level  CSS -->
    <link href="assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
    <!--End  Page Level  CSS -->
    <link href="assets/css/icons.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/apiStyle.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet">


</head>

<body class="sticky-header">
<div id="app">

    <!--Start left side Menu-->
    <div id="nav-api" class="left-side sticky-left-side" style="background-color: #B11E22">
    </div>
    <!--<script src="assets/js/commonPage/nav-api.js"></script>-->
    <!--End left side menu-->


    <!-- main content start-->
    <div class="main-content">

        <!-- header section start-->
        <!--<script src="assets/js/commonPage/header.js"></script>-->
        <div class="header-section">

            <a class='toggle-btn'><i class='fa fa-bars'></i></a>

            <!--notification menu start -->
            <div class='menu-right'>
                <ul class='notification-menu'>
                    <li>
                        <a href='#' class='btn btn-default dropdown-toggle info-number' data-toggle='dropdown'>
                            <i class='fa fa-history'></i>
                            <!--<span class='badge'>6</span>-->
                        </a>
                        <div class='dropdown-menu dropdown-menu-head pull-right'>
                            <h5 class='title'>只显示最多5条记录</h5>
                            <ul class='dropdown-list'>
                                <li class='notification-scroll-list notification-list '>
                                    <!-- list item-->
                                    <a href='' class='list-group-item' v-for="(item,index) in history.slice(0,5)">
                                        <div class='media'>
                                            <div class='pull-left p-r-10'>
                                                <em class='fa fa-shopping-cart noti-primary'></em>
                                            </div>
                                            <div class='media-body'>
                                                <h5 class='media-heading'>{{item.name}}</h5>
                                                <p class='m-0'>
                                                    <small>{{item.timeDiff}}</small>
                                                </p>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class='last'><a href='history.html'>查看所有足迹</a></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href='#' class='btn btn-default dropdown-toggle' data-toggle='dropdown'>
                            <img src='assets/images/avatar/1610176679728.jpg' alt=''/>
                            {{user.userName}}
                            <span class='caret'></span>
                        </a>
                        <ul class='dropdown-menu dropdown-menu-usermenu pull-right'>
                            <!--<li><a href='#'> <i class='fa fa-wrench'></i> uff </a></li>-->
                            <li><a href='user.html'> <i class='fa fa-user'></i> 个人中心 </a></li>
                            <li><a href='history.html'> <i class='fa fa-info'></i> 我的足迹 </a></li>
                            <li><a href='#' @click="loginout"><i class='fa fa-lock'></i> 退出登录 </a></li>
                        </ul>
                    </li>

                </ul>
            </div>
            <!--notification menu end -->

        </div>
        <!-- header section end-->


        <!--body wrapper start-->
        <div class="wrapper" id="wrapper" style="background-color: white">
            <!-- Start cover-->
            <div class="profile-cover">
                <div class="overlay-profile"></div>
                <div class="profile-inner">
                    <div class="profile-info">
                        <div class="profile-media">
                            <img src="assets/images/profile-picture.png" alt=""/>
                        </div>
                        <div class="profile-intro">
                            <h4>{{user.userName}}</h4>
                            <i class="fa fa-user"></i>  {{user.sex}}
                            <ul>
                                <li><i class="fa fa-birthday-cake"></i>  {{user.age}}岁</li>
                                <li><i class="fa fa-phone"></i>  {{user.phone}}</li>
                                <li><i class="fa fa-envelope-o"></i>  {{user.email}}</li>
                            </ul>
                        </div>
                        <!--<h4 style="color: white">当前位置：{{locationData.city}}{{locationData.district}}-->
                        <!--    {{locationData.nation}}{{locationData.province}}</h4>-->
                    </div>
                    <!--<nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">我的收货地址</a></li>
                            <li class="breadcrumb-item"><a href="#">我的足迹</a></li>
                            <li class="breadcrumb-item "><a href="#">我的支付宝</a></li>
                        </ol>
                    </nav>-->
                </div>
            </div>
            <!-- End cover-->

            <div class="container">
                <div class="row" style="margin-top: 10px">
                    <div style="background-color: #A0CDEB;height: 40px"><h3 style="color: #ffffff">根据浏览，猜我喜欢</h3></div>
                    <div style="background-color: #F5F8FA">
                        <div style="float: left;margin-right: 5px;" v-for="(item,index) in history.slice(0,6)">
                            <div class=" card border-secondary mb-3" style="width: 18rem;background-color: white">
                                <a :href='"../view_api/shop-detail.html?id="+item.id'>
                                    <img :src="item.headUrl" style="height: 180px;width: 180px" class="card-img-top">
                                </a>
                                <div class="card-body">
                                    <h5 class="card-title">{{item.name}}</h5>
                                    <p class="card-text">{{item.summary}}</p>
                                    <p class="card-text">{{item.timeDiff}}浏览</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Wrapper-->


        <!--Start  Footer -->
        <footer id="apiFooter" class="footer-main"></footer>
        <!--End footer -->


    </div>
    <!--End main content -->

</div>
<!--Begin core plugin -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/plugins/moment/moment.js"></script>
<script src="assets/js/jquery.slimscroll.js "></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/functions.js"></script>
<!-- End core plugin -->
<!--  vue  -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="assets/js/util/http-util.js"></script>
</body>
<script>
    $(function () {
        // $('#header').load('header.html');
        $('#apiFooter').load('apiFooter.html');
        $('#nav-api').load('nav-api.html');
    })
</script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            history: [],
            user: [],
            webIp:'',
            locationData:[]
        },
        computer: {},
        methods: {
            show: function () {
                let thisObj = this;
                /*let thisObj = this;
                thisObj.user=getSelection();
                console.log(thisObj.user)*/
                let url = "/shop_api/show";
                doGet(url, function () {
                });
                console.log(thisObj.history.viewTime)
            },
            test: function () {
                let thisObj = this;
                let url = "/shop_api/getHistory";
                doGet(url, function (resp) {
                    console.log("get history");
                    thisObj.history = resp;
                    console.log(thisObj.history);
                })
            },
            getHistory: function () {
                let thisObj = this;
                let url = "/shop_api/getHistory";
                doGet(url, function (resp) {
                    console.log("get history");
                    thisObj.history = resp;
                    console.log(thisObj.history);
                })
            },
            getUser: function () {
                let thisObj = this;
                let url = "/shop_api/getUser";
                doGet(url, function (resp) {
                    thisObj.user = resp;
                })
            },
            loginout: function () {
                let url = "/shop_api/loginpassout";
                doGet(url, function () {
                    location.href = "../view_api/loginpass.html";
                    alert("退出登录成功");
                });
            },
            /*getWebIp: function () {
                let thisObj = this;
                $.getJSON("https://api.ipify.org/?format=jsonp&callback=?&_=" + Math.random(), function (resp) {
                    thisObj.webIp = resp.ip;
                });
            },*/
            /*getLocation: function () {
                let thisObj = this;
                $.getJSON("https://api.ipify.org/?format=jsonp&callback=?&_=" + Math.random(), function (resp) {
                    thisObj.webIp = resp.ip;
                    console.log(thisObj.webIp);
                });
                $.ajax({
                    async : true,
                    url : "https://apis.map.qq.com/ws/location/v1/ip?ip=" + thisObj.webIp + "&key=N3WBZ-HHIKU-5A5VX-4XSNS-A6BR5-O5BWG&output=jsonp&callback=demo",
                    type : "GET",
                    dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
                    jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
                    jsonpCallback: 'handleResponse', //设置回调函数名
                    success: function(resp){
                        console.log(resp.ad_info);
                        thisObj.locationData=resp.ad_info;
                    }
                });
            },*/
        },
        mounted: function () {
            this.getHistory();
            this.getUser();
            // this.getLocation();
        }
    })
</script>
<!--<script type="text/javascript">
    function demo(resp) {
        console.log(resp);
        console.log("de");
    }
</script>-->
</html>

